<template>
  <div class="wrap">
    <div >
   <Form ref="formInline" :model="formInline" :rules="ruleInline" inline class="login-box">
      <FormItem prop="user">
          <Input type="text" v-model="formInline.user" placeholder="账号">
              <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
      </FormItem>
      <FormItem prop="password">
          <Input type="password" v-model="formInline.password" placeholder="密码">
              <Icon type="ios-lock-outline" slot="prepend"></Icon>
          </Input>
      </FormItem>
      <FormItem prop="text" >
          <Row>
                <Col span="12">
                    <Input type="text" v-model="formInline.imgcode" placeholder="验证码" @keyup.enter.native="handleSubmit('formInline')">
                    <Icon type="ios-key" slot="prepend"></Icon>
                </Input>
                </Col>
                <Col span="12">
                    <img :src="kaptcha" @click="getImg"/>
                </Col>
          </Row>
          
          
      </FormItem>
      <FormItem>
          <Button type="primary" @click="handleSubmit('formInline')">登录</Button>
      </FormItem>
  </Form>
  </div>
  </div>
</template>
<script>
export default {
  data () {
      return {
        formInline: {
            user: '',
            password: '',
            id:'',
            imgcode:'',
        },
        ruleInline: {
            user: [
                { required: true, message: 'Please fill in the user name', trigger: 'blur' }
            ],
            password: [
                { required: true, message: 'Please fill in the password.', trigger: 'blur' },
                { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
            ]
        },
        kaptcha:'',
        
      }
  },
  created(){
    this.getImg()
      
  },
  methods:{
    getImg(){
        this.$fetch('kaptcha/image2')
      .then(res=>{
        this.kaptcha = res.image

      })
      .catch(err=>{
          console.log('error',err)
      })
    },
    handleSubmit(name) {
        //this.$router.push('/index')

        this.$refs[name].validate((valid) => {
            if (valid) {
                console.log('user=',this.formInline.user)
                console.log('pwd',this.formInline.password)
                console.log('imgcode',this.formInline.imgcode)
                /*
                axios.post('http://127.0.0.1:8088/login/sysLogin', {
                    userName: this.formInline.user,
                    lastName: 'Flintstone'
                })
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });*/
                var formData = {
                    'userName':this.formInline.user,
                    'passWord':this.formInline.password,
                    'id':this.id,
                    'kaptcha':this.formInline.imgcode
                };
                this.$post('login/sysLogin',formData
                ,'',false)
                .then(result=>{
                    console.log('result',result)
                    //var response = Mock.mock(result.body)
                    var response = result
                    if(response.ret == '0'){
                      this.$Message.success(response.msg);
                      //this.$store.dispatch('login', response.user)
                      
                      this.$store.commit('login', response.user);
                      console.log('user',this.$store.getters.getUser);
                      this.$router.push({name:'index'});
                    } else if(response.ret == '2' || response.ret == '4' || response.ret == '1'){    
                        //Toast('加载新闻列表失败')
                        this.$Message.error(response.msg);
                    }
                })
                .catch(err=>{
                    this.$Message.error('登录失败！');
                    console.log('err',err)
                })
                //console.log('router',this.$router)
                //this.$router.push("/button");
                //this.$router.push('/index')
                //this.$router.push({name:'index', params:{id:1}})
            } else {
                console.log('error')
                //this.$router.push('/index')
                this.$Message.error('Fail!');
            }
        })
    }
  }
}
</script>
<style lang="scss" scoped>
  .login-box{
    padding:10px;
    margin-left:50%;
    margin-top:20%;
    margin-right:25%;
    border:1px solid #aaa;
    .ivu-form-item{
      display:block;
    }
    tr{
      padding:10px 5px;
    }
    p{
      // display:flex;
      // justify-content:space-around;
    }
    .lab{
      color:white;
      width:60px;
      margin-right:20px;
    }
    .btn-box{
      text-align:center;
    }
  }
</style>